<template>
	<view>
		<view class="content" v-for="item in dataList" :key="item.id">
			<view class="goods-intro">
				<img :src="item.previewImageUrl" @click="gotoDetail(item)" />
				<view class="intro-detail">
					<!-- <view class="user-name">丝巾名称 </view> -->
					<view class="show-tel">{{ item.name }}</view>
				</view>
			</view>
			<view class="add-cart-btn">
				<!-- 购物车 -->
				<img
					v-if="!item.joinedCart && isActiveFlag.value !== '0'"
					src="./../../../static/common/cartUnselect.png"
					@click="tabCartOuter(item)"
				/>
				<img
					src="./../../../static/common/cartSelected.png"
					@click="tabCartOuter(item)"
					v-else
				/>
			</view>
		</view>
		<!-- 权限弹窗 -->
		<f-auth-modal v-if="$store('user').authModal" />
		<!-- 规格弹窗 -->
		<uni-popup ref="popup">
			<view class="popup-box" style="border-radius: 16rpx 16rpx 0px 0px">
				<view class="goods-description">
					<img :src="previewImageUrl" />
					<view class="description-text">
						<!-- <view class="goods-name">丝巾名称 </view> -->
						<view class="goods-num">{{ productCode }} </view>
						<view class="purchase-quantity">
							<span style="white-space: nowrap; width: auto">数量</span>
							:<uni-number-box
								class="number-box"
								v-model="form.num"
								:min="min"
								@change="changeValue"
								:step="1"
							/>
						</view>
					</view>
				</view>
				<view class="select-specifications-box">
					<view class="select-specifications-title">选择规格 </view>
					<view class="select-specifications-list">
						<view
							class="item-list"
							v-for="(item, index) in specificationsList"
							:class="currentItemId === index ? 'active-item-list-specs' : ''"
							:key="item.id"
							@click="changeSpecificationsList(item, index)"
						>
							{{ item.nickname }}</view
						>
					</view>
				</view>
				<view class="add-to-cart-btn" @click="addCart">
					<b-button type="primary" style="border-radius: 50rpx; font-size: 32rpx"
						>加入购物袋</b-button
					>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, toRaw, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import goodsDetailApi from '../../../sheep/api/goodsDetail.js';
	import cartApi from '../../../sheep/api/cart.js';
	import $store from '@/sheep/store';
	import $router from '@/sheep/router';
	import $helper from '@/sheep/helper';

	const emit = defineEmits();
	const props = defineProps({
		dataList: {
			type: Array,
			default: () => {
				return [];
			},
		},
	});
	const userInfo = computed(() => JSON.parse(JSON.stringify($store('user').userInfo)));

	const min = 1;
	const popup = ref(null);
	const form = ref({
		isInCart: false,
		num: 1,
		showName: '',
	});
	const changeValue = (value) => {
		form.value.num = value;
	};
	const specificationsList = ref([]);
	const currentItemId = ref(null);
	const previewImageUrl = ref('');
	const productCode = ref(''); //图片编码
	const getShowDialog = (item) => {
		goodsDetailApi.getGooosDetail(item).then((res) => {
			uni.hideTabBar();
			popup.value.open('bottom');
			isActiveFlag.value = '0';
			specificationsList.value = res.data.printTypes;
			productCode.value = res.data.name;
			previewImageUrl.value = res.data.previewImageUrl;
		});
	}; // 选择规格
	const changeSpecificationsList = (item, index) => {
		currentItemId.value = index;
		form.value.showName = item.name;
		console.log(form.value.showName);
	};
	const selectItemId = ref('');
	// 购物车切换
	const tabCartOuter = (item) => {
		selectItemId.value = item.id;
		if (item.joinedCart) {
			cartApi.deleteCart(item.id).then((res) => {
				item.joinedCart = false;
				isActiveFlag.value = '0';
				return uni.showToast({
					title: '已取消',
					icon: 'success',
					mask: true,
				});
			});
		} else {
			// 试用用户权限控制
			if (!$store('user').isLogin) {
				$helper.toast('请先登录');
				$router.go('/pages/index/login');
				return;
			}
			if (userInfo.value.roleType == 21) {
				$store('user').setAuthModal(true);
				return;
			}
			getShowDialog(item);
		}
	};
	const isActiveFlag = ref('1');
	const buttonText = ref('加入购物袋');
	const addCart = () => {
		if (!form.value.num) {
			return uni.showToast({
				title: '请选择商品数量',
				icon: 'error',
				mask: true,
			});
		}
		if (!form.value.showName) {
			return uni.showToast({
				title: '请选择商品规格',
				icon: 'error',
				mask: true,
			});
		}

		//添加到购物车
		let data = {
			imageId: selectItemId.value,
			printType: form.value.showName,
			count: form.value.num,
		};
		cartApi.appendCart(data).then((res) => {
			isActiveFlag.value = '1';
			popup.value.close();
			resetFields();
			// 判断用户点击的当前项,然后手动改变当前项中joinedCart字段的值,无感切换亮显图标,不需要刷新页面
			props.dataList.forEach((item) => {
				if (item.id === selectItemId.value) {
					item.joinedCart = true;
				}
			});
			console.log(props.dataList);
			uni.showTabBar();
			return uni.showToast({
				title: '该商品已添加至购物袋',
				icon: 'success',
				mask: true,
			});
		});
	};
	const gotoDetail = (item) => {
		// 试用用户权限控制
		if (!$store('user').isLogin) {
			$helper.toast('请先登录');
			$router.go('/pages/index/login');
			return;
		}
		if (userInfo.value.roleType == 21) {
			$store('user').setAuthModal(true);
			return;
		}
		$router.go('/pages/index/goodsDetail', { id: item.id });
	};
	// 重置表单
	const resetFields = () => {
		// 表单重置
		form.value = {
			isInCart: false,
			num: 1,
			showName: undefined,
		};
		// 当前选中项重置
		currentItemId.value = null;
	};
	onLoad(() => {});
</script>

<style scoped lang="scss">
	.content {
		width: 686rpx;
		height: 240rpx;
		margin-top: 32rpx;
		background: #ffffff;
		box-shadow: 0px 60rpx 20rpx -50rpx rgba(18, 24, 26, 0.1);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.goods-intro {
			flex: 6;
			height: 208rpx;
			margin-left: 24rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			img {
				width: 208rpx;
				height: 208rpx;
			}
			.intro-detail {
				width: 220rpx;
				height: 208rpx;
				margin-left: 28rpx;

				.user-name {
					margin-top: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.show-tel {
					margin-top: 8rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 208rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
		.add-cart-btn {
			flex: 2;
			height: 208rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	.popup-box {
		height: 878rpx;
		padding: 40rpx 32rpx 0;
		background: #ffffff;
		.goods-description {
			width: 540rpx;
			height: 248rpx;
			display: flex;
			justify-content: space-between;
			img {
				height: 100%;
				object-fit: contain;
			}
			.description-text {
				padding-left: 16rpx;
				.goods-name {
					height: 56rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #111111;
					text-align: left;
					font-style: normal;
				}
				.goods-num {
					width: 236rpx;
					height: 44rpx;
					margin-top: 8rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.purchase-quantity {
					margin-top: 32rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #111111;
					font-style: normal;
					.number-box {
						padding-left: 24rpx;
					}
				}
			}
		}
		.select-specifications-box {
			width: 668rpx;
			margin-top: 32rpx;
			.select-specifications-title {
				width: 134rpx;
				height: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}
			.select-specifications-list {
				max-height: 256rpx;
				overflow: scroll;
				margin-top: 24rpx;
				padding-top: 32rpx;
				border-top: 1px solid #d8d8d8;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.active-item-list-specs {
					background: #ff6c01 !important;
					color: #ffffff !important;
				}
				.item-list {
					width: 310rpx;
					height: 52rpx;
					margin: 10rpx;
					background: #eef0f2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					font-style: normal;
				}
			}
		}
		.add-to-cart-btn {
			width: 668rpx;
			height: 88rpx;
			position: absolute;
			top: 90%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>
